<!-- 自定义底部导航栏 中间突出 -->
<template>
    <view class="container">
        <view
            class="tabbar-item"
            :class="[item.centerItem ? ' center-item' : '']"
            :style="'width: calc(100% /' + tabbarList.length + ')'"
            @click="changeItem(item)"
            v-for="(item, i) in tabbarList"
            :key="i">
            <view class="item-top">
                <image :src="curItem === item.id ? item.selectedIconPath : item.iconPath"/>
            </view>
            <view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        /* 当前导航栏 */
        currPage: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            curItem: 0, // 当前所选导航栏
            tabbarList: [
                {
                    id: 0,
                    pagePath: "/pages/home/home",
                    iconPath: "/static/logo.png",
                    selectedIconPath: "/static/logo.png",
                    text: "首页",
                    centerItem: false
                },
                {
                    id: 1,
                    pagePath: "/pages/publish/publish",
                    iconPath: "",
                    selectedIconPath: "",
                    text: "",
                    centerItem: true
                },
                {
                    id: 2,
                    pagePath: "/pages/my/my",
                    iconPath: "/static/logo.png",
                    selectedIconPath: "/static/logo.png",
                    text: "我的",
                    centerItem: false
                }
            ] // 导航栏列表
        };
    },
    mounted() {
        this.curItem = this.currPage; // 当前所选导航栏
        // #ifdef H5
        uni.hideTabBar(); // 隐藏 tabBar 导航栏
        // #endif
    },
    methods: {
        /* 导航栏切换 */
        changeItem(e) {
            console.log(this.curItem)
            // 中间凸起按钮
            if (e.id === 1) {
                uni.navigateTo({url: e.pagePath}); // 跳转到其他 tab 页面
                return;
            }
            uni.switchTab({url: e.pagePath}); // 跳转到其他 tab 页面
        }
    }
};
</script>

<style lang="scss" scoped>
$textDefaultColor: #B3B6C7; // 文字默认颜色
$bottomBg: #FFFFFF; // 底部背景
$textSelectedColor: #FF0000; // 文字选中颜色
.container {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    color: $textDefaultColor;
    padding: 5rpx 0;
    background-color: $bottomBg;
    box-shadow: 0 0 4rpx #B3B6C7;
    z-index: 9999;
}

.tabbar-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100rpx;

    .item-top {
        flex-shrink: 0;
        width: 52rpx;
        height: 54rpx;
        padding: 4rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .item-bottom {
        width: 100%;
        font-size: 24rpx;
    }

    .item-active {
        color: $textSelectedColor;
    }
}

.center-item {
    position: relative;

    .item-top {
        position: absolute;
        top: -48rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 105rpx;
        height: 105rpx;
        background: linear-gradient(3deg, #FF0000 0%, #FFA0A0 100%);;
        border-radius: 50%;
    }

    .item-bottom {
        position: absolute;
        bottom: 5rpx;
    }
}
</style>